<template>
	<view class="addgoods">
		<view class="recharge_li">
			<view class="title">
				商品名称
			</view>
			<view class="inputbox">
				<input type="text" maxlength="20" placeholder="最多20字" v-model="name">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品价格
			</view>
			<view class="inputbox">
				<input type="number" v-model="price">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品简介
			</view>
			<view class="inputbox">
				<textarea name="content" id="content" maxlength="30" cols="30" v-model="introduction" rows="10"
					placeholder="最多30字"></textarea>
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品单位
			</view>
			<view class="inputbox">
				<input type="text" v-model="unit" placeholder="件">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品LOGO(1张)：
			</view>
			<view class="uploadbox">
				<fjjImages :pageImgList="zimg" @getlogo="getlogo" :type="upload_method[0]" :imgCount="1"
					:upload="upload"></fjjImages>
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品轮播图(3张)：
			</view>
			<view class="uploadbox">
				<fjjImages :pageImgList="zimg" @getbanner="getbanner" :type="upload_method[1]" :imgCount="3"
					:upload="upload"></fjjImages>
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品详情：
			</view>
		</view>
		<editor3 @recieve="recieve"></editor3>
		<view class="sumbit" @click="publish">
			提交
		</view>
	</view>
</template>

<script>
	import fjjImages from '@/components/fjj-images/fjj-images.vue'
	import editor3 from '@/components/editor3/index.vue';

	export default {
		components: {
			fjjImages,
			editor3
		},
		data() {
			return {
				zimg: [],
				upload: 'goods',
				upload_method: ['getlogo', 'getbanner'],
				logo: '',
				name: '',
				unit: '',
				price: '',
				introduction: '',
				banner: [],
				detail: ''
			}
		},
		onLoad() {

		},
		methods: {
			getlogo(e) {
				console.log(e);
				this.logo = e[0]
				console.log(this.logo);
			},
			getbanner(e) {
				console.log(e);
				this.banner = e
			},
			recieve(e) {
				this.detail = e.html
			},
			publish() {
				if (this.name == '') {
					return uni.$showMsg('请输入商品名')
				}
				if (this.price == '') {
					return uni.$showMsg('请输入商品单价')
				}
				if (this.logo == '') {
					return uni.$showMsg('请上传logo')
				}
				if (this.banner.length == 0) {
					return uni.$showMsg('请上传轮播图')
				}
				if (this.detail == '') {
					return uni.$showMsg('请填写商品详情')
				}
				uni.showLoading({
					mask: true

				})
				PublishGoods({
					name: this.name,
					price: this.price,
					unit: this.unit,
					introduction: this.introduction,
					logo_url: this.logo,
					banner: this.banner,
					detail: this.detail
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.status == 1) {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/index'
							})
						}, 1000)
					} else {
						return false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sumbit {
		width: 80%;
		margin: 30px auto;
		border-radius: 10px;
		height: 45px;
		line-height: 45px;
		font-size: 16px;
		letter-spacing: 1px;
		text-align: center;
		background-color: #316b48;
		color: #fff;
		border: 1px solid #ccc;
	}

	.addgoods {
		background: linear-gradient(180deg, #316b48, #f9f9f9, #f9f9f9);
		min-height: 100vh;
		height: 100%;

		.recharge_li {
			display: flex;
			flex-direction: column;
			color: #000;

			.title {
				font-size: 15px;
				padding: 10px 3%;
				font-weight: bold;
			}

			.imgbox {
				width: 50%;
				margin-top: 5px;
				padding-left: 5%;

				image {
					width: 100%;
				}
			}

			.inputbox {
				background-color: #fff;
				margin: 0 auto;
				margin-top: 5px;
				box-sizing: border-box;
				width: 94%;
				border-radius: 5px;

				textarea {
					padding: 10px;
				}

				input {
					height: 40px;
					line-height: 40px;
					padding-left: 10px;
				}
			}

			.uploadbox {
				background-color: transparent;
			}
		}
	}
</style>